<template>
  <h1>App</h1>
  <p>{{ num }}</p>
  <button @click="num++">更新</button>
  <Child v-if="isShow" />
  <button @click="isShow = !isShow">更新</button>
</template>

<script lang="ts">
/*
  vue2：
    1. 初始化（创建）阶段
      beforeCreate
      created 
    2. 挂载阶段
      beforeMount
      mounted
        发送请求等异步任务
    3. 更新阶段
      beforeUpdate
      updated
    4. 卸载阶段
      beforeDestroy
        清除定时器，解绑事件等收尾工作
      destroyed

    5. 其他
      被 keep-alive 组件缓存的组件，多两个生命周期函数
        deactivated 失效 （取代beforeDestroy）
        activated 激活 （取代mounted）

      errorCaptured() {} 捕获后代错误产生错误

  vue3
    1. 初始化（创建）阶段
      beforeCreate
      created 
    2. 挂载阶段
      beforeMount
      mounted
        发送请求等异步任务
    3. 更新阶段
      beforeUpdate
      updated
    4. 卸载阶段
      beforeUnmount
        清除定时器，解绑事件等收尾工作
      unmount

    5. 其他
      被 keep-alive 组件缓存的组件，多两个生命周期函数
        deactivated 失效 （取代beforeDestroy）
        activated 激活 （取代mounted）

      errorCaptured() {} 捕获后代错误产生错误

    react
      15 
        初始化
        constructor()
        componentWillMount
        render
        componentDidMount

        更新
        componentWillReceiveProps
        shouldComponentUpdate
        componentWillUpdate
        render
        componentDidUpdate

        卸载
        componentWillUnmount

      16
        初始化
        constructor()
        static getDerivedStateFromProps() {}
        render
        componentDidMount() {}

        更新
        static getDerivedStateFromProps() {}
        shouldComponentUpdate
        render
        static getDerivedStateFromError() {}
        componentDidCatch()
        static getSnapshotBeforeUpdate() {}
        componentDidUpdate

        卸载
        componentWillUnmount

      hooks: useEffect
*/
import Child from "./Child.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      num: 1,
      isShow: true,
    };
  },
  beforeCreate() {
    console.log("App beforeCreate 1");
  },
  created() {
    console.log("App created 2");
  },
  beforeMount() {
    console.log("App beforeMount 3");
  },
  mounted() {
    console.log("App mounted 4");
  },
  beforeUpdate() {
    console.log("App beforeUpdate 5");
  },
  updated() {
    console.log("App updated 6");
  },
};
</script>

<style scoped></style>
